<template>
  <n-space vertical :size="3">
    <template v-if="detail.appId">
      <img class="logo" :src="detail.headImg" alt="" />
      <n-text>{{ detail.appletName }}</n-text>
      <n-text :depth="3">原始ID: {{ detail.userName }}</n-text>
      <n-text :depth="3">AppId: {{ detail.appId }}</n-text>
    </template>
    <template v-else> 未授权 </template>
  </n-space>
</template>

<script setup lang="ts">
  import { NSpace, NText } from 'naive-ui'

  defineProps({
    detail: {
      type: Object,
      default: () => ({})
    }
  })
</script>

<style scoped lang="scss">
  .logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
  }
</style>
